<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>半透明效果菜单</title>
<style type="text/css">
A {
	COLOR: blue; FONT-SIZE: 10pt; TEXT-DECORATION: none;color:#FF6600 
}
A:hover {
	FONT-SIZE: 10pt;color:#395531
}
.transMenu {
		BORDER: #666666 1px solid;
		FONT: 12px Verdana;
		POSITION: absolute; 
		background-image:url("images/item_out.jpg");
		background-repeat : repeat-y;
    	Filter: Alpha(Opacity=50);
	}
</style>

</head>

<script language="javascript">
	function ShowMenu(divID, menuItem)
	{
		if (document.all)
		{
			switch (menuItem)
			{
				case '网站导航':
				{		
					var htmltxt = "<a href = 'www.mingribook.com'> 明日图书网站 </a> <br> <a href = 'www.mrbccd.cn'> 明日编程社区 </a> <br> <a href = 'www.mrsoft.com'> 明日软件 </a> <br>";
					MenuID.innerHTML = htmltxt;
					MenuID.style.padding = "5px";
					MenuID.style.height = "55px";
					break;	
				}
				case '技术支持':
				{
					var menutxt = "<a href = 'www.mingribook.com'> QQ </a> <br> <a href = 'www.mrbccd.cn'> MSN </a> <br> <a href = 'www.mrsoft.com'> Phone </a> <br>";
					
					MenuID.innerHTML = menutxt;
					MenuID.style.padding = "5px";
					MenuID.style.height = "55px";
					break;
				}
			}
			//设置菜单显示位置
			MenuID.style.left = document.body.scrollLeft + event.clientX - event.offsetX;
			MenuID.style.top = document.body.scrollTop + event.clientY - event.offsetY + 18 ;
			MenuID.style.display = "block";	
		}
	}
	function HideMenu()
	{
		if (document.all)
		{
			//设置菜单显示位置
			MenuID.style.display = "none";	
		}			
	}
	
	if (document.all)
	{
		document.onmousemove = HideMenu;
	}	
</script>

<body>
<table width="393" height="186" border="1" align="center" bordercolor="#FF9900"  cellpadding="0" cellspacing="0">
<tr>
    <td width="386" height="44"  scope="col"  align="left"background="images/top.jpg">&nbsp;</td>
  </tr>
  <tr>
    <td height="134" valign="top"><table width="390" height="32" border="0">
      <tr>
        <th width="142" scope="col">
        <a href="#"   onmousemove="ShowMenu('MenuID', '网站导航');  event.cancelBubble = true; return true;" >网站导航 <br></a>
        </th>
<th width="111" scope="col"><a href="#"  onmousemove="ShowMenu('MenuID', '技术支持'); event.cancelBubble = true; return true;">技术支持</a></th>
        <th width="123" scope="col">&nbsp;</th>
        </tr>
    </table></td>
  </tr>
  <tr >
    <td height = "21" background="images/bottom.jpg">&nbsp;</td>
  </tr>
</table>
<div id = MenuID class="transMenu" onmousemove = "event.cancelBubble = true; return true;" style=" position: absolute; display: none; left: 371px; top: 310px; width: 120px; height: 70px;">
 
  <p >&nbsp;</p>
</div> 

</body>
</html>